<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="商户钱包流水列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户名称"  :up-table="true" name="mchtId" :options="mchtList" :value.sync ="mchtIdValue"></form-select>
                        <form-select title="交易类型" :up-table="true"  name="txnType" :options="seqTpe"></form-select>
                        <form-date-time title="交易开始日期" :up-table="true" name="txnStartDate"></form-date-time>
                        <form-date-time title="交易结束日期" :up-table="true" name="txnEndDate"></form-date-time>
                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">商户名称</td>
                            <td>{{item.mchtIdAndName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">电子券名称</td>
                            <td>{{item.couponIdAndName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易流水号</td>
                            <td>{{item.seqNo}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">营销流水号</td>
                            <td>{{item.marketSeqNo}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">转入钱包账户</td>
                            <td>{{item.tranAcc}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">转入方后账户金额</td>
                            <td>{{item.tranAmt}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">转出钱包账户</td>
                            <td>{{item.rollAcc}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">转出方后账户金额</td>
                            <td>{{item.rollAmt}}</td>

                        </tr>
                        <tr>
                            <td style="width:50%">转出银行</td>
                            <td>{{item.bankName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">转出银行账户</td>
                            <td>{{item.bankAcc}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易类型</td>
                            <td>{{(item.txnType == 'prep' && '充值')||(item.txnType == 'cash' && '转账')||(item.txnType == 'transfer' && '提现')||(item.txnType == 'buy' && '购买')||(item.txnType == 'market' && '营销')||(item.txnType == 'deposit' && '押金')||(item.txnType == 'back' && '退券')||(item.txnType == 'confirm' && '充值')||(item.txnType == 'expenses' && '营销费用')}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易金额</td>
                            <td>{{item.txnAmt}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易日期</td>
                            <td>{{item.txnDateAndTxnTime}}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right: 10px;
    }
    .btn{
        margin-top: 5px;
    }
</style>
<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"
    import summernote from "pages/partial/summernote.vue";
    var serialize = require('form-serialize');

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            mchtList:[],
            mchtIdValue:'',
            mchtIdAndName:'',
            item: {},
            columnsSet: [],
            seqTpe:[
                {key: "所有",value: ""},
                {key: "充值",value: "prep"},
//                {key: "转账",value: "cash"},
//                {key: "提现",value: "transfer"},
                {key: "购买",value: "buy"},
                {key: "营销",value: "market"},
                {key: "押金",value: "deposit"},
                {key: "退券",value: "back"},
//                {key: "充值待确认",value: "confirm"},
//                {key: "营销费用",value: "expenses"}
            ]
        }),
        watch:{
            async mchtIdValue(v){

            }
        },
        methods: {
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht() {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/plat/mcht/getNameList/' + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content;
                    if(list.length > 1){
                        list.unshift({key:"所有商户",value:""});
                        self.$set("mchtList", list);
//                        self.mchtIdValue = list[0].value
                    }else{
                        list.unshift({key:"商户",value:""});
                        self.$set("mchtList", list);
                    }
                },  error => {});
            }
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "交易流水号",
                data: "seqNo",
                className: "operate"
            },{
                title: "商户名称",
                data: "mchtName",
                className: "operate"
            },{
                title: "营销流水号",
                data: "marketSeqNo",
                visible:false,
                className: "operate",
            },{
                title: "转入钱包账户",
                data: "tranAcc",
                className: "operate"
            },{
                title: "转入方后账户金额",
                data: "tranAmt",
                className: "operate"
            },{
                title: "转出钱包账户",
                data: "rollAcc",
                className: "operate"
            },{
                title: "转出方后账户金额",
                data: "rollAmt",
                className: "operate"
            }, {
                title: "转出银行",
                data: "bankName",
                visible:false,
                className: "operate"
            }, {
                title: "转出银行账户",
                data: "bankAcc",
                visible:false,
                className: "operate"
            },{
                title: "交易类型",
                data: "txnType",
                className: "operate",
                render: function (data) {
                    if (data == "prep") {
                        return data = "充值"
                    } else if (data == "buy") {
                        return data = "购买"
                    } else if (data == "market") {
                        return data = "营销"
                    } else if (data == "deposit") {
                        return data = "押金"
                    } else if(data == 'confirm'){
                        return data = "充值"
                    }else{
                        return data = "退券"
                    }
                }
            }, {
                title: "交易金额",
                data: "txnAmt",
                className: "operate"
            },{
                title: "交易日期",
                data: "txnDateAndTxnTime",
                className: "operate",
                render: function (data) {
                    return dateFormat(data)
                }
            },{
                    title: "相关操作",
                    className: "operate",
                    render: function (value, type, row) {
                        if(row.txnType == 'confirm'){
                                return `
                                  <button type="button" class="btn btn-defalt btn-sm">充值待确认</button>
                                 `
                        }else if(row.txnType == 'prep'){
                            return `
                               <button type="button" class="btn btn-defalt btn-sm">已确认</button>
                               `
                        }else if(row.txnType == 'market'){
                            return `
                        <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                        `
                        }
                    }
                }
            ]
        },

        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: "",
                endDate: ""
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //对开始日期进行数据处理
                    _data.txnStartDate = _data.txnStartDate.replace(/-/g, "");
                    _data.txnEndDate = _data.txnEndDate.replace(/-/g, "");
                    //判断日期
                    if(_data.txnStartDate.length>0 && _data.txnEndDate.length>0){
                        if(_data.txnStartDate-_data.txnEndDate > 0){
                            Midway.alert({title: "操作提示", content: '交易开始日期不能大于交易结束日期'})
                            // return false
                        }
                    }else if(_data.txnStartDate.length>0 && _data.txnEndDate.length <=0){
                        Midway.alert({title: "操作提示", content: '交易结束日期不能为空'})
                        // return false
                    }else if(_data.txnStartDate.length <= 0 && _data.txnEndDate.length > 0){
                        Midway.alert({title: "操作提示", content: '交易开始日期不能为空'})
                        // return false
                    }
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                    _data.loginMchtId = mchtId;
                    if(mchtId != '10000000'){
                        _data.mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                    }else{
                        _data.mchtId = _data.mchtId;
                    }
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/market/query",
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    //没有转出钱包账户的时候,转出方账户是0的时候不显示
                    for(var i = 0;i < result.content.couponList.length;i++){
                       if(result.content.couponList[i].rollAcc == ''){
                           if(result.content.couponList[i].rollAmt == '0'){
                               result.content.couponList[i].rollAmt = '';
                           }else{
                               result.content.couponList[i].rollAmt = result.content.couponList[i].rollAmt;
                           }
                       }else{
                           result.content.couponList[i].rollAmt = result.content.couponList[i].rollAmt;
                       }
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.couponList || []
                    })
                }
            });
            $(self.$el).on("click", ".state", async function() {
                var Row = $(this).closest('tr').get(0);
                var txnAmt = dataTable.row(Row).data().txnAmt;
                var seqNo = dataTable.row(Row).data().seqNo;

                    await Midway.confirm({
                        title: "确认列表",
                        content: "是否要确认交易金额:" + txnAmt + "?"
                    })
                var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/walletTxn/mchtQuery",
                        data:{'seqNo':seqNo},
                        method: "POST"
                    });
                Midway.alert({title:"操作提示",content:result.errorInfo})
                dataTable.ajax.reload(null, false);
                self.resetBindDrag()
                // dataTable.ajax.reload();
            });
            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                dataArray.txnDateAndTxnTime = dateFormat(dataArray.txnDateAndTxnTime);
                dateTime()
                var form = self.$els.detailMform;
                var _data = serialize(form, { hash: true, disabled:true, empty:true });
                _data.mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                _data.seqNo = dataArray.seqNo;
                _data.marketSeqNo = dataArray.marketSeqNo;
                if(dataArray.txnType == 'market'){
                    self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/market/queryDetail",
                        data: _data,
                        method: "POST"
                    }).then(response => {
                        let list = response.content.contentList;
                        let mchtName = '',coupName = '',bankAcc;
                        for(var i = 0;i<list.length;i++){
                            mchtName = list[i].mchtIdAndName;
                            coupName = list[i].couponIdAndName;
                            bankAcc = list[i].bankAcc
                        }
                        dataArray.mchtIdAndName = mchtName;
                        dataArray.couponIdAndName = coupName;
                        dataArray.bankAcc = bankAcc;
                        self.item = dataArray;
                    }, error => {});
                }
                dataTable.ajax.reload(null, false);
                $(self.$els.detailModal).modal('hide');
//                 self.resetBindDrag()

                $(self.$els.detailModal).modal('show');
            });
        }
    }
</script>
